<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>axios的基本使用</title>
		<script type="text/javascript" src="./js/axios.min.js"></script>
	</head>
	<body>
		<button onclick="getAllPerson()">获取所有人</button>
		<button onclick="getOnePerson()">获取一个人</button>
		<button onclick="addPerson()">添加一个人</button>
		<button onclick="updatePerson()">更新一个人</button>
		<button onclick="deletePerson()">删除一个人</button>

		<script type="text/javascript" >
			/* 
					1.axios调用的返回值是Promise实例。
					2.成功的值叫response，失败的值叫error。
					3.axios成功的值是一个axios封装的response对象，服务器返回的真正数据在response.data中
					4.携带query参数时，编写的配置项叫做params
					5.携带params参数时，就需要自己手动拼在url中
					6.data用于配置请求体参数
								若data的值是字符串，则采用urlencoded编码
								若data的值是对象类型，且默认采用json编码
			*/

			//axios发送GET请求-不携带参数
			function getAllPerson(){
				//完整
				/* const result = axios({
					url:'http://localhost:5000/persons', //请求地址
					method:'GET', //请求方式
				})
				result.then(
					response => {console.log('请求成功了',response.data)},
					error => {console.log('请求失败了',error.message)}
				) */

				//精简
				/* axios.get('http://localhost:5000/persons').then(
					response => {console.log('请求成功了',response.data)},
					error => {console.log('请求失败了',error.message)}
				) */
			}

			//axios发送请求-带query参数
			function getOnePerson(){

				//完整写法
				/* axios({
					url:'http://localhost:5000/person/',
					method:'GET',
					params:{id:'1618480594484'} //此处严重注意，写的配置项叫params，但携带的是query
				}).then(
					response => {console.log('请求成功了',response.data)},
					error => {console.log('请求失败了',error.message)}
				) */

				// 精简写法
				axios.get('http://localhost:5000/person',{params:{id:'1618480594484'}}).then(
					response => {console.log('请求成功了',response.data)},
					error => {console.log('请求失败了',error.message)}
				)
			}

			//axios发送请求-带请求体参数
			function addPerson(){
				//可以借助URLSearchParams帮我们整理urlencoded编码（不常用）
				/* 	const p = new URLSearchParams()
				p.append('name','美丽刘')
				p.append('age','19') */

				//完整
				axios({
					url:'http://localhost:5000/person',
					method:'POST',
					// data:{name:'老刘',age:13} //data用于配置请求体参数，若data的值是对象类型，且默认采用json编码
					// data:'name=天禹张&age=15' //data用于配置请求体参数，若data的值是字符串,则采用urlencoded编码
				}).then(
					response => {console.log('请求成功了',response.data)},
					error => {console.log('请求失败了',error.message)}
				)

				//精简
				/* axios.post('http://localhost:5000/person','name=强李&age=3').then(
					response => {console.log('请求成功了',response.data)},
					error => {console.log('请求失败了',error.message)}
				) */

			}
			
			//axios发送PUT请求-带请求体参数
			function updatePerson(){
				axios({
					url:'http://localhost:5000/person',
					method:'PUT',
					// data:'id=1618557076233&name=刘刘老&age=2' 
					data:{id:'1618557076233',name:'老刘刘',age:131} //data用于配置请求体参数，若data的值是对象类型，且默认采用json编码
				}).then(
					response => {console.log('请求成功了',response.data)},
					error => {console.log('请求失败了',error.message)}
				)
			}
			
			//axios发送DELETE请求-带params参数
			function deletePerson(){
				axios({
					url:'http://localhost:5000/person/1618480594484',
					method:'DELETE'
				}).then(
					response => {console.log('请求成功了',response.data)},
					error => {console.log('请求失败了',error.message)}
				)
			}

		</script>
	</body>
</html>